import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_rx/get_rx.dart';
import 'package:jd_flutter/keepAlive/keep_alive_wrapper.dart';


class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {

  final _selectIndex = 0.obs;

  @override
  Widget build(BuildContext context) {

    ScreenUtil.init(context, designSize: const Size(750, 1334));

    return KeepAliveWrapper(
        child: Row(
          children: [
            SizedBox(
              width: 0.25.sw,
              height: double.infinity,
              child: ListView.builder(
                  itemCount: 28,
                  itemBuilder: (context,index){
                    return Column(
                      children: [
                        //可点击组件
                        InkWell(
                          onTap: (){
                            _selectIndex.value = index;
                          },
                          child: Obx(() => Container(
                              height: 80.h,
                              width: double.infinity,
                              padding: EdgeInsets.only(top:20.h),
                              color: _selectIndex.value == index ? const Color.fromRGBO(240, 246, 246, 0.9) : Colors.white,
                              child: Text("第${index+1}个",textAlign: TextAlign.center)
                          )) ,
                        ),
                        const Divider(height: 1),
                      ],
                    );
                  }
              ),
            ),
            Expanded(
                flex: 1,
                child: Container(
                  height: double.infinity,
                  color: const Color.fromRGBO(240, 246, 246, 0.9),
                  child: GridView.builder(
                      itemCount: 27,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        mainAxisSpacing: 5.w,
                        crossAxisSpacing: 5.h,
                        childAspectRatio: 1 / 1.2,
                      ),
                      itemBuilder: (context,index){
                        return InkWell(
                          onTap: (){
                              Get.toNamed("/prod",arguments: {
                                "index" : index
                              });
                          },
                          child: Container(
                            padding: EdgeInsets.all(5.w),
                            child: Column(
                              children: [
                                AspectRatio(
                                  aspectRatio: 1 / 1,
                                  child: Image.network("https://www.itying.com/images/flutter/list8.jpg",fit: BoxFit.cover),
                                ),
                                SizedBox(
                                  height: 28.h,
                                  child: const Text("女装"),
                                )
                              ],
                            ),
                          ),
                        );
                      }
                  ),
                )
            )
          ],
        )
    );
  }
}